<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: red;
        margin: 100px auto;
        /* transform-origin: left bottom; */
      }

      div:hover {
        /* 1. 里面写的数字不跟单位 就是倍数的意思 1 就是1倍  2就是 2倍 */
        /* transform: scale(x, y); */
        /* transform: scale(2, 2); */
        /* 2. 修改了宽度为原来的2倍  高度 不变 */
        /* transform: scale(2, 1); */
        /* 3. 等比例缩放 同时修改宽度和高度，我们有简单的写法  以下是 宽度修改了2倍，高度默认和第一个参数一样*/
        /* transform: scale(2); */
        /* 4. 我们可以进行缩小  小于1 就是缩放 */
        /* transform: scale(0.5, 0.5); */
        /* transform: scale(0.5); */
        /* 5. scale 的优势之处： 不会影响其他的盒子 而且可以设置缩放的中心点*/
        /* width: 300px;
            height: 300px; */
        transform: scale(2);
      }
    </style>
  </head>

  <body>
    <div></div>
    123123
  </body>
</html>
